<template>
    <div>
        <el-dialog title="添加菜单" :visible.sync="rootVisible">
            <el-form label-width="110px">
                <el-form-item label="名称">
                    <el-input v-model="rootMenuName"></el-input>
                </el-form-item>
                <el-form-item label="图标">
                    <el-select v-model="rootMenuIcon">
                        <el-option v-for="(icon,index) in icons" :key="'icon_'+index" :label="icon" :value="icon"><i :class="icon">{{icon}}</i></el-option>
                    </el-select>
                    <i :class="rootMenuIcon"></i>
                </el-form-item>
                <el-form-item label="路由">
                    <el-input v-model="rootMenuRouter"></el-input>
                </el-form-item>
                <el-form-item label="是否显示到右侧">
                    <el-radio v-model="rootMenuStatus" label="1">是</el-radio>
                    <el-radio v-model="rootMenuStatus" label="0">否</el-radio>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="rootSave()">创建</el-button>
                    <el-button @click="rootVisible = false">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
        <!--编辑节点-->
        <el-dialog title="编辑菜单" :visible.sync="editVisible">
            <el-form label-width="50px">
                <el-form-item label="名称">
                    <el-input v-model="editMenuName"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="editSave()">保存</el-button>
                    <el-button @click="editVisible = false">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
        <el-card v-loading="loading" shadow="never">
            <div slot="header">菜单管理
                <el-button type="primary" size="mini" @click="addRoot()">添加菜单</el-button>
            </div>
            <el-tree :data="menus" :props="{label:'menu_name'}">
                <div class="node" @mousemove="showOpt=data.id" @mouseout="showOpt=false" slot-scope="{data,node}">
                    <div>
                        {{data.menu_name}}
                    </div>
                    <div v-show="showOpt==data.id">
                        <el-button type="danger" size="mini" @click.stop="del(data.id)">删除</el-button>
                        <el-button type="primary" size="mini" @click.stop="edit(data)">编辑</el-button>
                        <el-button v-show="node.previousSibling" size="mini" type="primary" icon="el-icon-arrow-up" @click.stop="sortNode(data.id,'up')"></el-button>
                        <el-button v-show="node.nextSibling" size="mini" type="primary" icon="el-icon-arrow-down" @click.stop="sortNode(data.id,'down')"></el-button>
                        <el-switch @change="changeStatus(data.id)" v-model="data.status" active-value="1" inactive-value="0">
                        </el-switch>
                        
                    </div>
                </div>
            </el-tree>
        </el-card>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                id:'',
                icons:[
                    'el-icon-info','el-icon-error','el-icon-tickets',
                    'el-icon-goods','el-icon-service',
                ],
                showOpt: '',
                loading: false,
                editVisible: false,
                editMenuName: '',
                editId: '',
                rootMenuName: '',
                rootMenuIcon: '',
                rootMenuStatus: '1',
                rootMenuRouter: '/',
                rootVisible: false,
                menus: [],
            }
        },
        created() {
            this.getMenus();
        },
        methods: {
            sortNode(id, dir) {
                this.axios.put(`/menus/sort/${id}/${dir}`).
                then((ret) => {
                    this.getMenus();
                })
            },
            edit(data) {
                this.editId = data.id;
                this.editMenuName = data.menu_name;
                this.editVisible = true;
            },
            changeStatus(id){
                 this.axios.put(`/menus/edit/${id}`, {
                    status: this.status,
                }).then((ret) => {
                    this.editVisible = false;
                    this.$root.$emit('updateMenus');
                })
            },
            editSave() {
                this.axios.put(`/menus/edit/${this.editId}`, {
                    menu_name: this.editMenuName,
                }).then((ret) => {
                    this.getMenus();
                    this.editVisible = false;
                    this.$root.$emit('updateMenus');
                })
            },
            del(id) {
                const _this = this;
                this.$confirm('确定删除么??', '删除', '提示!!').then(() => {
                    this.axios.delete(`/menus/del/${id}`).then(() => {
                        _this.getMenus();
                    }).catch((error) => {
                        _this.$message.error('请先删除子菜单')
                    })
                }).catch(() => {})
            },
            addRoot() {
                this.rootVisible = true;
            },
            rootSave() {
                this.axios.post('/menus/add', {
                    menu_name: this.rootMenuName,
                    icon: this.rootMenuIcon,
                    router: this.rootMenuRouter,
                    status: this.rootMenuStatus,
                    parent_id: 0,
                }).then((ret) => {
                    this.getMenus();
                    this.rootVisible = false;
                })
            },
            getMenus() {
                this.loading = true;
                this.axios.get('/menus').then((ret) => {
                    const {
                        data
                    } = ret.data;
                    this.loading = false;
                    this.menus = data;
                })
            }
        }
    }
</script>

<style>
    .el-tree-node__content {
        border: 1px solid rgb(202, 199, 199);
        margin: 10px 0;
        padding: 10px 10px;
    }
    .node {
        display: flex;
        padding: 10px 10px;
        width: 100%;
        justify-content: space-between;
    }
</style>
